<template>
  <el-dialog title="编辑岗位" :model="editDialog" width="50%" close-on-press-escape top="0" :close-on-click-modal="false" class="editPost">
    <!-- <span class="step"><i>1</i> 基础设置</span><span class="step"><i>2</i> 确认完成</span> -->
    <!-- <el-form :model="formEdit" :rules="rules" ref="ruleForm" size="small" class="postForm"> -->
    <!-- <el-form-item label="岗位名称" label-width="100px" prop="stationName" label-position="right">
          <el-input v-model="form.stationName" autocomplete="off"></el-input>
        </el-form-item> -->

    <!-- <el-form-item label="企业类型" label-width="100px" prop="businessType" label-position="right">
          <el-select v-model="form.businessType">
            <el-option value="品牌企业" label="品牌企业"></el-option>
            <el-option value="品牌企业" label="商家企业"></el-option>
          </el-select>
        </el-form-item> -->
    <!-- <el-form-item label="选择权限" label-width="100px" class="permission"> -->

    <div class="treeNdoe">
      <div class="father">
        <p>选择权限</p>
        <div class="left">
          <p>菜单列表</p>
          <el-tree :data="menuList" node-key="id" ref="tree" highlight-current :props="defaultProps"> </el-tree>
        </div>
        <div class="right">
          <p>功能权限</p>
          <div>
            <el-checkbox>全部功能</el-checkbox>
            <el-checkbox>删除</el-checkbox>
            <el-checkbox>新增</el-checkbox>
          </div>
          <p>属性查看权</p>
          <div>
            <p>品牌列表</p>
            <div>
              <el-checkbox>全部</el-checkbox>
              <el-checkbox>电话号码</el-checkbox>
              <el-checkbox>姓名</el-checkbox>
              <el-checkbox>地址</el-checkbox>
            </div>
          </div>
          <div>
            <p>门店列表</p>
            <div>
              <el-checkbox>全部</el-checkbox>
              <el-checkbox>电话号码</el-checkbox>
              <el-checkbox>姓名</el-checkbox>
              <el-checkbox>地址</el-checkbox>
            </div>
          </div>
        </div>
        <div class="buttons">
          <el-button @click="getCheckedNodes">通过 node 获取</el-button>
        </div>
      </div>
    </div>

    <!-- </el-form-item> -->
    <!-- </el-form> -->
    <template #footer>
      <span class="dialog-footer">
        <el-button plain size="mini" @click="!editDialog">取 消</el-button>
        <el-button type="primary" size="mini" v-on:childValue="childValue($event)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  props: {
    menuList: {
      type: Object,
      default: () => {}
    },
    editDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      obj: {
        systemId: [],
        parentMenuId: [],
        menuName: [],
        menuType: []
      }
    }
  },
  methods: {
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes())
      const res = this.$refs.tree.getCheckedNodes()
      res.forEach((item) => {
        this.parentMenuId.push(item.parentMenuId)
        this.menuType.push(item.menuType)
        this.systemId.push(item.systemId)
        this.menuName.push(item.menuName)
      })
      this.boj.parentMenuId = Array.from(new Set(this.obj.parentMenuId))
      this.boj.menuType = Array.from(new Set(this.obj.menuType))
      this.boj.systemId = Array.from(new Set(this.obj.systemId))
      this.boj.menuName = Array.from(new Set(this.obj.menuName))
      // console.log(Array.from(new Set(this.obj.parentMenuId)))
      // console.log(Array.from(new Set(this.obj.menuType)))
      // console.log(Array.from(new Set(this.obj.systemId)))
      // console.log(Array.from(new Set(this.obj.menuName)))
      this.$emit('childValue', this.obj)
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    }
    // setCheckedNodes() {
    //   this.$refs.tree.setCheckedNodes([
    //     {
    //       id: 5,
    //       label: '二级 2-1'
    //     },
    //     {
    //       id: 9,
    //       label: '三级 1-1-1'
    //     }
    //   ])
    // },
  },
  setup() {
    const state = reactive({
      defaultProps: {
        children: 'children',
        label: 'menuName'
      }
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="less" scoped>
.father {
  display: flex;
  padding: 10px;
  p {
    margin-right: 10px;
  }
  .left {
    width: 250px;
    height: 400px;
    border: 1px solid #ccc;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
    p {
      padding: 10px;
      color: #b4b4b4;
    }
  }
  .right {
    & > p {
      margin: 10px 0;
    }
    & > div {
      & > p {
        margin: 10px 0;
        color: #b4b4b4;
      }
    }
  }
}
/deep/.el-icon-caret-right:before {
  content: '';
}
</style>
